<template>
  <scroll-view scroll-y="true" class="scroll-Y" @scroll="handleScroll" @scrolltolower="handleReachBottom">
    <view class="content">
      <comHead :datas="datasObj">
        <template #headerContent>
          <view class="header_box w-100" :style="'height: 292rpx;'">
            <view class="pd-30" style="background-color: #FFFFFF;padding-bottom: 20rpx;">
              <!--tab栏  -->
              <view class="tabBar flex" style="height: 72rpx;">
                <view class="item ft c-66 flex-center mr-30 bd-r20" :class="{ active: selectId === item.id }"
                  v-for="(item, index) in tableList" :key="index" @click="selectBtn(index, item)">
                  <span class="pd-10">
                    {{ item.name }}
                  </span>
                  <view class="time_btn flex ft-24 c-33" v-if="selectId === item.id">
                    <image class="icons bd-r40" src="https://cdn.oss.bon-top.cn/static_bc/images/time_icon.png"
                      mode="aspectFill">
                    </image>
                    {{ dataList?.timeData?.month + ' ' + dataList?.timeData?.time_str }}
                  </view>
                </view>
              </view>
              <view class="tips_box flex-bwt mt-20 bd-r20" style="height: 72rpx;" v-if="showTips">
                <view class="ft-22 c-66 flex">
                  <image class="icon_samll fs0 mr-8"
                    src="https://cdn.oss.bon-top.cn/static_bc/images/warning_icon_black.png" mode="aspectFill">
                  </image>
                  抢券方法 [去抢] -[产品详情] -[优惠券] -[点击领取]
                </view>
                <image class="icon_samll fs0" src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png"
                  mode="aspectFill" @click="showTips = false">
                </image>
              </view>
              <view class="tabBar2 flex mt-20" style="height: 58rpx;">
                <view class="item ft c-66 flex-center mr-30 bd-r40" :class="{ active: selectId2 === item.id }"
                  v-for="(item, index) in tableList2" :key="index" @click="selectBtn2(index, item)">
                  {{ item.name }}

                </view>
              </view>
            </view>
          </view>
        </template>
      </comHead>
      <!-- <view style="height: 100px;"></view> -->
      <!-- 本月白菜价 -->
      <view class="month_lowPrice_box" :style="{ 'margin-top': (showTips ? '0' : '-72rpx') }">
        <comLoadMord v-if="Object.keys(dataList).length > 0" :dataList='dataList' :pageInfo='pageInfo'
          ref="LoadMordView" @getDatas="getProductPreferentialListFun">
          <view class="list_view">
            <view class="item bd-r40 pd-20" v-for="item in bcMonthList" :key="item.id">

              <view class="item_model bd-r40" @click="goPage('/subpackage/immigration/immigration?id=' + item.id)">
                <!-- 倒计时 -->
                <view class="timeOut pd-20">
                  <view class="ft flex-center" v-if="item.act_status == 'will_start'">
                    <view class="ft-24 fw-800 c-33 mr-4">{{ item.time_str }}</view>
                  </view>
                  <view class="ft flex-center" v-else>
                    <view class="ft-24 fw-800 c-33 mr-4">{{ "距离结束" }}</view>
                    <comTimeOut :size="20" :time="item.preferential_end_time"></comTimeOut>
                  </view>

                </view>

                <view class="flex">
                  <image class="imgs bd-r40" :src="item.cover" mode="aspectFill">
                  </image>

                  <view class="contents ml-20 te-wid">
                    <view class="title_model mt-20 flex">
                      <view class="label flex-center ft-20" v-for="label in item.recommends_show" :key="label">{{ label
                      }}
                      </view>
                      <view class="text ft-32 ft1 te-wid">
                        <p class="te-1">{{ item.name }}</p>
                      </view>
                    </view>

                    <view class="money flex mt-8 ">
                      <view class="ft-20 bg flex-bwt" style="color: #FF0000;">
                        <view style="margin-left: 10rpx;flex-shrink: 0;">
                          {{ item.currency_symbol }}
                          <span class="ft-num3 ft-36">{{ item.bc_price_show }}</span>
                          {{ item.bc_price_unit }}
                        </view>
                        <view style="margin-right: 10rpx;flex-shrink: 0;">
                          <span style="color: #F1F1F1;">|</span>
                          <span class="c-33">白菜券后价</span>
                        </view>

                      </view>
                      <span style="color:#F1F1F1;">&nbsp;|</span>
                      <view class="ft-line ml-10 c-99 ft-20">
                        {{ item.currency_symbol }}
                        <span class="ft-num ft-line c-99 ft-32"> {{ item.old_price_show }}</span>
                        {{ item.old_price_unit }}
                      </view>
                    </view>
                    <view class="quan flex-bwt">
                      <view class="quan_content">
                        <view class="c-66 ft-22">先抢先得，仅剩{{ item.coupon_remain_num }}名</view>
                        <view class="quan_progress ft-24 bd-r8">
                          <!-- 进度条 -->
                          <view class="progress">
                            <view class="progress_color" :style="{ width: item.progressVal + '%' }"></view>
                          </view>
                          <view class="ft-24">{{ item.coupon_use_num }}/{{ item.coupon_total_num }}</view>
                        </view>
                      </view>
                      <view class="btn full" v-if="item.coupon_remain_num <= 0">名额已满</view>
                      <view class="btn" v-else-if="item.act_status == 'un_get'">去抢</view>
                      <view class="btn full" v-else-if="item.act_status == 'will_start'">即将开始</view>
                      <view class="btn over" v-else-if="item.act_status == 'is_get'">已抢</view>
                      <view class="btn over" v-else>已结束</view>
                    </view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </comLoadMord>


      </view>
    </view>
  </scroll-view>

</template>

<script setup lang="js">
import { utils } from "@/utils/utils.js";
import { api } from "@/utils/api.js";
import { DataUtils } from "@/utils/Data.js";
import comHead from '@/components/comHead.vue';
import comLoadMord from '@/components/comLoadMord.vue';
// import { debounce } from 'lodash-es';
import {
  onLoad,
} from '@dcloudio/uni-app';
import {

  onMounted,
  reactive,
  ref
} from 'vue';
import comTimeOut from '@/components/comTimeOut.vue'

let datasObj = reactive({
  title: '本月白菜价',
  img: 'https://cdn.oss.bon-top.cn/static_bc/images/bc_banner.png',
  color: '#DBF046',
  direction: '',
  scrollTop: 0,
  isBorder: false,
  height: 496,
  backisImg: true,//导航文字模块的背景图
  headerisImg: true,//整个huader模块的背景图
  fullImag: true,//header是否显示完整的图片
  imgHeight: 496,
  coverImag: true,//展示图片+内容部分，不盖住图片
})
let dataList = ref({})
let pageInfo = reactive({
  currentPage: 1,
  pageSize: 10
})
const selectId = ref(1)
const tableList = ref([{
  id: 1,
  name: '本月场',
  key: ''
},
{
  id: 2,
  name: '下月场',
  key: ''
}])
const selectId2 = ref(1)
const tableList2 = ref([{
  id: 1,
  name: '全部',
  key: ''
},
{
  id: 2,
  name: '移民',
  key: ''
}, {
  id: 3,
  name: '教育',
  key: ''
},])

const showTips = ref(true);
const timeData = ref({});
// // 定义 onChange 方法
const onChange = (e) => {
  timeData.value = e;
};
// 场选择
const selectName = ref('')
const selectBtn = async (idx, item) => {
  selectId.value = item.id
  selectName.value = item.key
  getProductPreferentialListFun()
}
const selectName2 = ref('')
const selectBtn2 = async (idx, item) => {
  selectId2.value = item.id
  selectName2.value = item.name == '全部' ? '' : item.name
  getProductPreferentialListFun()

}

// 触底请求
const LoadMordView = ref(null)
const handleReachBottom = () => {
  LoadMordView.value.changeBottom()

}
//本月白菜价
let bcMonthList = ref([])
const getProductPreferentialListFun = async () => {
  let obj = {
    week_type: selectId.value,//1本月场/下月场2
    cate_name: selectName2.value,//移民/全部
    ...pageInfo
  }
  uni.showLoading()
  await utils
    .request(
      api.getProductPreferentialList,
      obj,
      "get"
    )
    .then((res) => {
      dataList.value = res.data
      bcMonthList.value = res.data?.items
      console.log('我拿到数据======>', bcMonthList.value)
      dataList.value.noDataType = 0
      dataList.value.listIsShow = false
      if (bcMonthList.value.length) dataList.value.listIsShow = true
      bcMonthList.value.forEach(item => {
        let _num = (item.coupon_use_num / item.coupon_total_num) * 100
        item.progressVal = item.coupon_use_num == 0 ? 0 : _num > 100 ? 100 : _num
        item.timeStr = DataUtils.formatCountdown(item.preferential_end_time)

      })
      uni.hideLoading()

    });
}

// 监听滚动事件
const handleScroll = (e) => {
  // const scrollTop = e.detail?.scrollTop; // 获取滚动距离
  // // 优化监听事件 防止毫秒级触发
  // datasObj.direction = (scrollTop > datasObj.scrollTop) ? 'down' : 'up'
  // if (scrollTop > 10 && datasObj.direction == 'down' && datasObj.backisImg) {
  //   datasObj.color = '#FFFFFF'
  //   datasObj.backisImg = false
  //   datasObj.scrollTop = scrollTop
  //   datasObj.isBorder = true
  // } else if (scrollTop < 5 && datasObj.direction == 'up' && !datasObj.backisImg) {
  //   datasObj.color = '#DBF046'
  //   datasObj.backisImg = false
  //   datasObj.scrollTop = scrollTop
  //   datasObj.isBorder = false
  // }
}

let times = reactive(0)
// 跳转
const goPage = (url) => {
  uni.navigateTo({ url: url })
}

onLoad(async () => {
  await getProductPreferentialListFun()
  times = DataUtils.formatCountdown('2025-3-21 13:20:00')

})

</script>

<style lang="scss" scoped>
.tabBar {
  width: 100%;
  justify-content: flex-start;

  .item {
    padding: 0 5rpx;
    height: 72rpx;
    background: #f8f8f8;
    box-sizing: border-box;
  }

  .time_btn {
    background-color: #fff;
    height: 64rpx;
    border-radius: 20rpx;
    padding: 0 10rpx;

    .icons {
      width: 36rpx;
      height: 36rpx;
    }
  }

  .active {
    background: #dbf046;
  }
}

.tabBar2 {
  width: 100%;
  justify-content: flex-start;

  .item {
    width: 136rpx;
    height: 58rpx;
    background: #fff;
    box-sizing: border-box;
    border: 2rpx solid #F1F1F1;
  }

  .active {
    background: #333;
    color: #fff;
    border: none;
  }
}

.tips_box {
  width: 100%;
  padding: 20rpx;
  background: linear-gradient(to bottom, #F2F2FF, #FFFFFF);
  box-sizing: border-box;

}

// .header_box{position: relative;}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 30rpx 150rpx;
  box-sizing: border-box;
}

.scroll-Y {
  height: 100vh;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}


.time {
  @include flex;
  align-items: center;
  margin-left: 10rpx;

  &__custom {
    margin-top: 4px;
    // width: 22px;
    min-width: 22rpx;
    // height: 22px;
    background-color: #9c0000;
    border-radius: 4px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    justify-content: center;
    align-items: center;
    padding: 6rpx;
    font-weight: 800;


    &__item {
      color: #fff;
      font-size: 20rpx;
      text-align: center;
    }
  }

  &__doc {
    color: #9c0000;
    padding: 0px 4px;
  }

  &__item {
    color: #606266;
    font-size: 15px;
    margin-right: 4px;
  }
}


// 本月白菜价
.month_lowPrice_box {
  width: 100%;
  // background-color: #FBFFDF;

  .header {
    width: 100%;
    position: relative;
    text-align: center;

    .title_bg {
      z-index: 10;
      text-align: left;
      // line-height: 80rpx;
      // font-family: 'DIN COROS';
      font-weight: 400;
      font-size: 36rpx;
      top: 14rpx;
      position: relative;
      color: #DBF046;
      opacity: 0.7;
      z-index: 0;
      text-align: center;

    }

    .title {
      position: absolute;
      top: 0rpx;
      font-weight: 800;
      font-size: 32rpx;
      color: #333;
      z-index: 1;
      text-align: center;
      // line-height: 80rpx;
      text-align: center;


    }

  }

  .list_view {
    // margin-top: 30rpx;

    .item {
      background-color: #fff;
      border: 2rpx solid #F1F1F1;
      margin-bottom: 30rpx;
      width: 690rpx;

      .item_model {
        // background-color: #F8F8F8;
        background: linear-gradient(to bottom, #FFF3EC, #FFFFFF);
        // padding-bottom: 20rpx;
        overflow: hidden;

        .imgs {
          width: 222rpx;
          height: 274rpx;
          flex-shrink: 0;
        }



      }


      .contents {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // background-color: red;
        height: 274rpx;

        .title_model {
          display: flex;

          .label {
            display: inline-block;
            height: 36rpx;
            line-height: 36rpx;
            box-sizing: border-box;
            border-radius: 8rpx;
            padding: 0 4rpx;
            margin-right: 4rpx;
            color: #333333;
            background: linear-gradient(to right, #DBF046, #FFEE7E);
            flex-shrink: 0;

          }

          .text {
            margin-left: 10rpx;
            margin-right: 10rpx;
          }



        }

        .money {
          margin-top: -10rpx;

          .bg {
            background: linear-gradient(to left, #FFF3EC, #fff3ec00);
            // padding: 10rpx;
            border-radius: 20rpx;
            height: 56rpx;
            line-height: 56rpx;
            width: 236rpx;
          }
        }

        .quan {
          background: linear-gradient(to left, #f8f8f800, #F8F8F8);
          padding: 20rpx;
          box-sizing: border-box;
          border-radius: 20rpx;

          .btn {
            width: 124rpx;
            height: 78rpx;
            background: linear-gradient(to left, #FFBA61, #DBF046);
            font-size: 28rpx;
            border-radius: 20rpx;
            line-height: 78rpx;
            text-align: center;

          }

          .over {
            background-color: #F1F1F1;
            background: linear-gradient(to left, #F1F1F1, #F1F1F1);
            color: #999999;
          }

          .full {
            background-color: #F1F1F1;
            background: linear-gradient(to left, #333333, #333333);
            color: #fff;
          }

          .quan_content {
            flex: 1;
            box-sizing: border-box;
            margin-right: 10rpx;


            .quan_progress {
              flex: 1;
              display: flex;
              align-items: center;
              height: 20rpx;
              margin-top: 20rpx;

              .progress {
                height: 100%;
                flex: 1;
                background-color: #F1F1F1;
                border-radius: 20rpx;
                overflow: hidden;
                padding: 0;
                margin: 0;
                margin-right: 20rpx;

                .progress_color {
                  background: linear-gradient(to left, #FFBA61, #DBF046);
                  border-radius: 20rpx;
                  height: 100%;
                }

              }
            }
          }
        }
      }

    }
  }
}
</style>